<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${pageTitle ?: '同步平台 - 服务器管理'}">同步平台 - 服务器管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar Navigation -->
            <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/}">
                                <i class="bi bi-house"></i> 首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/dashboard}">
                                <i class="bi bi-speedometer2"></i> 仪表盘
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" th:href="@{/server}">
                                <i class="bi bi-server"></i> 服务器管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/database}">
                                <i class="bi bi-database"></i> 数据库管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/sync/database}">
                                <i class="bi bi-arrow-left-right"></i> 数据库同步
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/sync/file}">
                                <i class="bi bi-files"></i> 文件同步
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/restore}">
                                <i class="bi bi-arrow-counterclockwise"></i> 数据库恢复
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/task/log}">
                                <i class="bi bi-list-check"></i> 同步日志
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
            
            <!-- Main Content -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">服务器管理</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <a th:href="@{/server/add}" class="btn btn-sm btn-primary">
                            <i class="bi bi-plus-circle"></i> 添加服务器
                        </a>
                    </div>
                </div>
                
                <!-- Server List -->
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>名称</th>
                                        <th>主机</th>
                                        <th>端口</th>
                                        <th>用户名</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${servers != null && !servers.empty}" th:each="server : ${servers}">
                                        <td th:text="${server.id}">1</td>
                                        <td th:text="${server.name}">服务器1</td>
                                        <td th:text="${server.host}">192.168.1.100</td>
                                        <td th:text="${server.port}">22</td>
                                        <td th:text="${server.username}">admin</td>
                                        <td>
                                            <span th:if="${server.status == 1}" class="badge bg-success">在线</span>
                                            <span th:if="${server.status == 0}" class="badge bg-danger">离线</span>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a th:href="@{/server/edit/{id}(id=${server.id})}" class="btn btn-outline-primary">
                                                    <i class="bi bi-pencil"></i> 编辑
                                                </a>
                                                <button type="button" class="btn btn-outline-danger delete-btn"
                                                        th:data-id="${server.id}" th:data-name="${server.name}">
                                                    <i class="bi bi-trash"></i> 删除
                                                </button>
                                                <button type="button" class="btn btn-outline-success test-connection-btn"
                                                        th:data-id="${server.id}" th:data-name="${server.name}">
                                                    <i class="bi bi-check-circle"></i> 测试连接
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr th:if="${servers == null || servers.empty}">
                                        <td colspan="7" class="text-center">暂无服务器信息，请添加</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要删除服务器 <span id="serverName"></span> 吗？此操作不可撤销。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">删除</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Connection Test Modal -->
    <div class="modal fade" id="testConnectionModal" tabindex="-1" aria-labelledby="testConnectionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="testConnectionModalLabel">测试连接</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="connectionTestResult">
                        <div class="d-flex justify-content-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                        <p class="text-center mt-3">正在测试与服务器 <span id="testServerName"></span> 的连接...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
    <script th:src="@{/js/script.js}"></script>
    
    <script>
        $(document).ready(function() {
            // Delete server
            $('.delete-btn').on('click', function() {
                const serverId = $(this).data('id');
                const serverName = $(this).data('name');
                
                $('#serverName').text(serverName);
                $('#deleteModal').modal('show');
                
                $('#confirmDelete').off('click').on('click', function() {
                    $.ajax({
                        url: '/server/' + serverId,
                        type: 'DELETE',
                        success: function(response) {
                            if (response.success) {
                                window.location.reload();
                            } else {
                                alert('删除失败: ' + response.message);
                            }
                        },
                        error: function() {
                            alert('请求失败，请稍后再试。');
                        },
                        complete: function() {
                            $('#deleteModal').modal('hide');
                        }
                    });
                });
            });
            
            // Test connection
            $('.test-connection-btn').on('click', function() {
                const serverId = $(this).data('id');
                const serverName = $(this).data('name');
                
                $('#testServerName').text(serverName);
                $('#connectionTestResult').html(
                    '<div class="d-flex justify-content-center">' +
                    '<div class="spinner-border text-primary" role="status">' +
                    '<span class="visually-hidden">Loading...</span>' +
                    '</div>' +
                    '</div>' +
                    '<p class="text-center mt-3">正在测试与服务器 <span>' + serverName + '</span> 的连接...</p>'
                );
                $('#testConnectionModal').modal('show');
                
                $.ajax({
                    url: '/server/test',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: serverId }),
                    success: function(response) {
                        if (response.success) {
                            $('#connectionTestResult').html('<div class="alert alert-success">连接成功!</div>');
                        } else {
                            $('#connectionTestResult').html('<div class="alert alert-danger">连接失败: ' + response.message + '</div>');
                        }
                    },
                    error: function() {
                        $('#connectionTestResult').html('<div class="alert alert-danger">请求失败，请稍后再试。</div>');
                    }
                });
            });
        });
    </script>
</body>
</html> 